SpiralSlider Tester

The port of my Spiral TrackBar from C# to Javascript

Release #4 - September 10, 2022


This project was done as an effort to learn Javascript and HTML5. I learned much, but primarily I discovered that I don't really like Javascript...
Hover the mouse over a parameter name for a description of the parameter. Check the Errors and Warnings box below after clicking on a Set button.
Canvas width: The width of the canvas on which the SpiralSlider is drawn.
Canvas height: The height of the canvas on which the SpiralSlider is drawn.
Minimum: Lower limit of the range for Value.

Setting this value may result in Maximum or Value changing. Maximum is changed if the difference between Maximum and Minimum is not evenly divisible by StepSize. Value is changed if it is not one the valid step values.
Maximum: Upper limit of the range for Value.

Setting this value may result in Minimum or Value changing. Minimum is changed if the difference between Maximum and Minimum is not evenly divisible by StepSize. Value is changed if it is not one the valid step values.
StepSize: The amount that Value changes when the marker is moved the minimal amount.

Must be greater than zero.

Setting this value may result in any of Minimum, Maximum, or Value changing. Minimum or Maximum is changed if the difference between Maximum and Minimum is not evenly divisible by StepSize. Value is changed if it is not one the valid step values.
Value: Current value.

Value may be changed to be equal to the nearest step value.
ValueIndex: Index of current value.

Must be in range zero to ValueCount minus 1.
ValueCount: Number of valid values.

This will be equal to (Maximum - Minimum) % StepSize + 1.
StartAngle: Start angle for the spiral track line.

Must be greater than or equal to zero.
Rotations: Length of spiral track line in terms of full rotations.

Must be greater than zero.
StopAngle: Final angle for the spiral track line.

This is equal to (StartAngle + 360 * Rotations).
StepSpacing: Indicates the spacing of the tick marks on the track line.

If "arc", tick marks are equal spaced out by arc length along the track line.

If "angle", tick marks are equal spaced out by angle along the track line.
IndentStart: Indent value at the start of the track line.

This value is the distance from the center of the control, where 1.0 is defined as the distance from the center of the control to the nearest edge.

Must be greater than or equal to zero and less than IndentStop.
IndentStop: Indent value at the end of the track line.

This value is the distance from the center of the control, where 1.0 is defined as the distance from the center of the control to the nearest edge.

Must be less than equal to one and greater than IndentStart.
BackFillStyle: Style to fill the background of the control.
TrackWidth: Width of the inside of the track in pixels.

Must be greater than or equal to zero.
TrackFillStyle: Indicates how the inside area of the track is to be filled.

If "transparent", the inside area is not filled.

If "solid", the inside area is filled with only the color specified by TrackFillSolidColor.

If "flowgradient", the inside area is filled with a color gradient specified by TrackFillGradientColors.
TrackFillSolidColor: The color used to fill the inside of the track if TrackFillStyle is "solid".
TrackFillGradientColors: The colors used to fill the inside of the track if TrackFillStyle is "flowgradient".

The gradient is specified as a series of color:stop values, where color is either an HTML color-hex value (e.g. #80D420), or a standard named color, and stop is a numeric value between 0.0 and 1.0 inclusive.

The stop value specifies the location for the color: 0.0 is at the start of the track, and 1.0 is at the end. Stop values must be uniformly increasing, and cannot be repeated.
TrackEndShape: Indicates the shape of the ends of the track.

If "round", the end of the track is a semi-circle.

If "flat", the end of the track is flat.
TrackBorderSize: Thickness of the border of the track in pixels.

Must be greater than or equal to zero. If zero, there is no border.
TrackBorderStyle: Style used the draw the track border.

This is usually just a color.
TickLocation: Indicates the location of the tick marks. If not "none", a tick mark is drawn at each step.

If "none", there are no tick marks.

If "inner", the ticks are drawn only on the inside edge of the track.

If "outer", the ticks are drawn only on the outside edge of the track.

If "both", the ticks are drawn on both the inside and outside edges of the track.
TickLength: Length of the major ticks in pixels.

Must be greater than or equal to zero.
TickLengthWarp: Controls how the length of the ticks change in the vicinity of the marker.

The warp is specified as an odd number of tokens. The middle token controls the length of the tick at the marker position. The preceding tokens control the lengths of the ticks before the marker, and the succeeding tokens control the length of the ticks after the marker.

Each token is a numeric value optionally preceded by an "x". Without the "x", the value is the length of the tick in pixels. With the "x", the value is a multiplicative factor.

TickWidth: Thickness of the ticks in pixels.

Must be greater than or equal to zero.
TickWidthWarp: Controls how the width of the ticks change in the vicinity of the marker.

The warp is specified as an odd number of tokens. The middle token controls the width of the tick at the marker position. The preceding tokens control the widths of the ticks before the marker, and the succeeding tokens control the width of the ticks after the marker.

Each token is a numeric value optionally preceded by an "x". Without the "x", the value is the width of the tick in pixels. With the "x", the value is a multiplicative factor.

TickStyle: Style used the draw the tick.

This is usually just a color.
TickMajorFrequency: Frequency of the major ticks, which are drawn at full tick length.

A major tick is drawn every nth step, where n is the frequency value.

Must be an integer greater than zero.
TickMinorFrequency: Frequency of the minor ticks, which are drawn at half tick length.

A minor tick is drawn every nth step, where n is the frequency value.

Must be an integer greater than zero.

Steps which qualify as both major and minor ticks are drawn as major.
MarkerShape: The shape of the marker.

Currently only rectangle is implemented, so selecting ellipse still generates a rectangle.
MarkerSizeWidth: The size of the marker in pixels in the direction tangential (perpendicular) to the track.

Must be greater than zero.
MarkerSizeHeight: The size of the marker in pixels in the direction parallel to the track.

Must be greater than zero.
MarkerFillStyle: Style used the fill the marker.

This is usually just a color.
MarkerBorderSize: Thickness of the border of the marker in pixels.

Must be greater than or equal to zero. If zero, the marker has no border.
MarkerBorderStyle: Style used the draw the marker border.

This is usually just a color.

Errors and Warnings